<template>
  <view class="tel ph-40 mt-20">
    <u--form labelPosition="left" :model="model" ref="uForm" labelWidth="80" :labelStyle="{ fontSize: 32 }">
      <u-form-item label="+86" borderBottom>
        <u--input v-model="model.mobile" border="none" placeholder="请输入您的手机号" fontSize="16" type="number" @input="isBtn"></u--input>
      </u-form-item>
      <u-form-item label="验证码" borderBottom>
        <view class="f ai-c jc-s-b">
          <u--input v-model="model.code" border="none" placeholder="请输入短信验证码" fontSize="16" @input="isBtn"></u--input>
          <view class="w-1 h-40 su"></view>
          <view class="fs-32  ml-16" :class="seconds > 0 ? 'text-color3' : 'text-color'" @click="sendCode">{{ tips }}</view>
        </view>
      </u-form-item>
    </u--form>
    <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
      <view class="f ai-c ph-40 h-136 jc-s-b">
        <view class="w-327"><u-button text="取消" color="#F5F5F5" shape="circle" :customStyle="{ color: '#555555' }" @click="cancel"></u-button></view>
        <view class="w-327"><u-button text="下一步" color="#FABB3C" shape="circle" @click="toNext" ></u-button></view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { sendSmsCode } from '@/services/api/auth';
import { validatePhoneNumber } from '@/utils/global';
const model = ref({
    mobile: '',
    code: '',
});
const disabled = ref(true);
const tips = ref('发送验证码');
const seconds = ref(0);
let timer: any = null;
//发送验证码
const sendCode = async () => {
    if (seconds.value != 0) return;
    if (!validatePhoneNumber(model.value.mobile)) {
        uni.showToast({
            title: '请输入正确手机号',
            icon: 'none',
        });
        return;
    }

    await sendSmsCode({ mobile: model.value.mobile, scene: 1 });
    seconds.value = 60;
    tips.value = `再次发送${seconds.value}s`;
    getTime();
};
function getTime() {
    timer = setInterval(() => {
        if (seconds.value > 1) {
            seconds.value--;
            tips.value = `再次发送${seconds.value}s`;
        } else {
            seconds.value = 0;
            tips.value = '发送验证码';
            clearInterval(timer);
        }
    }, 1000);
}
function isBtn() {
 
    // if (model.value.mobile && model.value.code) {
    //     disabled.value = false;
    // } else {
    //     disabled.value = true;
    // }
}
function toNext(){
 if (!validatePhoneNumber(model.value.mobile)) {
        uni.showToast({
            title: '请输入正确手机号',
            icon: 'none',
        });
        return;
    }
	if (!model.value.code) {
	       uni.showToast({
	           title: '请输入验证码',
	           icon: 'none',
	       });
	       return;
	   }
	emit('bn', model.value)
}

const emit = defineEmits<{
	    // update:固定写法，后面的变量是父组件中v-model：后面的这个变量
	    (event: 'bn', n: any): void
	}>()
function cancel() {
    uni.navigateBack();
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.tel {
    background: #fff;
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
    }
    .su {
        background: #faf4e9;
    }
}
</style>